<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧考勤系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script>
    <style>
        .video-container {
            margin: 20px 0;
            position: relative;
            background: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            text-align: center;
            padding: 25px 0; /* 再增加一些上下内边距 */
            height: auto;
            min-height: 500px; /* 再增加一些最小高度 */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #video {
            width: 100%;
            max-width: 640px;
            height: auto;
        }
        .recognition-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px;
            font-size: 1.2em;
            display: none;
        }
        .quick-actions {
            margin: 20px 0;
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        .quick-actions a {
            padding: 15px 30px;
            background: #4CAF50;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            transition: background 0.3s;
        }
        .quick-actions a:hover {
            background: #45a049;
        }
        .attendance-log {
            margin: 20px auto;
            max-width: 800px;
            background: white;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .attendance-log h2 {
            margin-top: 0;
            color: #333;
        }
        .log-entry {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
        .log-entry:last-child {
            border-bottom: none;
        }
        /* 添加视频流相关样式 */
        #video-stream {
            width: 100%;
            max-width: 640px;
            height: auto;
            max-height: 100%; /* 确保不超出容器 */
            display: block;
            margin: 0 auto;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            border-radius: 4px;
            object-fit: contain; /* 确保视频按原比例显示，不被裁剪 */
        }
        #video-placeholder {
            text-align: center;
            padding: 20px;
            background: #f5f5f5;
            border-radius: 4px;
        }
        .status-container {
            margin: 15px auto;
            padding: 15px;
            background: #f5f5f5;
            border-radius: 4px;
            /* max-width: 640px; 限制宽度与视频相同 */
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>智慧考勤系统</h1>
            <p class="subtitle">基于人脸识别和语音交互的智能考勤解决方案</p>
        </header>

        <main>
            <section class="card" id="attendance-section">
                <h2>工位监控</h2>
                <div class="video-container">
                    <img id="video-stream" src="{{ url_for('video_feed') }}" alt="摄像头画面">
                </div>
                <div class="status-container">
                    <p>状态: <span id="attendance-status">等待识别</span></p>
                    <p>最近识别: <span id="last-recognition">无</span></p>
                </div>
            </section>

            <section class="card" id="voice-section">
                <h2>语音助手</h2>
                <div class="voice-container">
                    <div class="voice-status">
                        <p>状态: <span id="voice-status">正在监听</span></p>
                    </div>
                    <div class="voice-log">
                        <h3>语音记录</h3>
                        <ul id="voice-log-list">
                            <li>系统启动，等待语音指令...</li>
                        </ul>
                    </div>
                </div>
            </section>

            <section class="card" id="quick-actions">
                <h2>快捷操作</h2>
                <div class="buttons-container">
                    <button id="help-btn" class="action-btn">使用帮助</button>
                    <button id="policy-btn" class="action-btn">查询制度</button>
                    <button id="leave-btn" class="action-btn">请假申请</button>
                    <a href="/register_face" class="action-btn">人脸注册</a>
                </div>
            </section>
        </main>

        <footer>
            <p>&copy; 2023 智慧考勤系统 | <a href="/admin">管理员入口</a></p>
        </footer>
    </div>

    <script>
        // 初始化 Socket.IO
        const socket = io();
        
        // 获取页面元素
        const attendanceStatus = document.getElementById('attendance-status');
        const lastRecognition = document.getElementById('last-recognition');
        const voiceStatus = document.getElementById('voice-status');
        const voiceLogList = document.getElementById('voice-log-list');
        const videoStream = document.getElementById('video-stream');

        // 处理人脸识别事件
        socket.on('face_recognition_event', (data) => {
            attendanceStatus.textContent = '识别成功';
            lastRecognition.textContent = `${data.name} (${data.timestamp})`;
            
            // 2秒后重置状态
            setTimeout(() => {
                attendanceStatus.textContent = '等待识别';
            }, 2000);
        });

        // 处理语音命令事件
        socket.on('voice_command_event', (data) => {
            // 添加新的语音记录
            const li = document.createElement('li');
            li.textContent = `${data.timestamp}: ${data.text}`;
            voiceLogList.insertBefore(li, voiceLogList.firstChild);
            
            // 最多显示10条记录
            while (voiceLogList.children.length > 10) {
                voiceLogList.removeChild(voiceLogList.lastChild);
            }
        });

        // 检查视频流加载状态
        videoStream.onload = function() {
            console.log('视频流加载成功');
        };

        videoStream.onerror = function() {
            console.error('视频流加载失败');
            this.style.display = 'none';
            const placeholder = document.createElement('div');
            placeholder.id = 'video-placeholder';
            placeholder.innerHTML = '<p>摄像头连接失败，请刷新页面重试</p>';
            this.parentNode.appendChild(placeholder);
        };

        // 快捷操作按钮事件处理
        document.getElementById('help-btn').addEventListener('click', () => {
            window.location.href = '/help';
        });

        document.getElementById('policy-btn').addEventListener('click', () => {
            window.location.href = '/policy';
        });

        document.getElementById('leave-btn').addEventListener('click', () => {
            window.location.href = '/leave_request';
        });
    </script>
</body>
</html> 